<!-- 
自定义顶部导航栏。很多页面都是一个渐变色，要求顶部导航适应渐变色。
u-navbar的高度是固定的。
let systemInfo = uni.getSystemInfoSync();
let height = systemInfo.platform == 'ios' ? 44 : 48;
 -->
<template>
	<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
		<view class="custom-navbar">
			<u-navbar
				:is-back="isBack" 
				:title="title" 
				:title-bold="true" 
				:is-fixed="false" 
				:border-bottom="false"
				:background="navbarBg"
				:title-color="navbarTitleColor"
			>
				<template v-slot:right>
					<slot name="right"></slot>
				</template>
			</u-navbar>
		</view>
		
	</u-sticky>
</template>

<script>
	export default {
		name:"custom-navbar",
		props: {
			// 
			title: {
				type: String,
				default: ''
			},
			// 这个属性需要在父页面通过 onPageScroll 获取
			percent: {
				type: Number,
				default: 0
			},
			isBack: {
				type: Boolean,
				default: false
			},
			navigationStyle: {
				type: String,
				default: 'custom'
			}
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			console.log('onPageScroll scrollTop', scrollTop)
		},
		data() {
			return {
			};
		},
		computed: {
			navbarBg() {
				if (this.navigationStyle === 'custom') {
					// 'rgba(256,256, 256,' + this.percent + ')'
						return {
							background: `rgba(256, 256, 256, ${this.percent})`
						}
				}
				return {
					background: `rgba(256, 256, 256, 1)`
				}
			},
			navbarTitleColor() {
				if (this.navigationStyle === 'custom') {
					return this.percent > 0.5 ? '#000000' : '#ffffff'
				} else {
					return '#000000'
				}
			}
		},
		methods: {
			clickHandler(e) {
				console.log("e", e)
			}
		}
	}
</script>

<style lang="scss">

</style>